<template>
	<view class="comment" :class="{active:closeBar}">
		<view class="comment-header">
			<view class="header-number">
				2.5w条评论
			</view>
			<view class="iconfont icon-close-circle icon-close" @click="closeIt">
				
			</view>
		</view>
		<scroll-view scroll-y="true" class="comment-list">
			<view class="item">
				<view class="img-box">
					<image class="img" src="http://localhost:8099/static/宇航员1.jpg" mode=""></image>
				</view>
				<view class="comment-content">
					<view class="name">
						张三
					</view>
					<view class="content">
						这个很有创意~
					</view>
				</view>
				<view class="icon-box">
					<view class="iconfont icon-love icon-img">
						
					</view>
					<view class="love-number">
						12
					</view>
				</view>
			</view>
			<view class="item">
				<view class="img-box">
					<image class="img" src="http://localhost:8099/static/宇航员1.jpg" mode=""></image>
				</view>
				<view class="comment-content">
					<view class="name">
						张三
					</view>
					<view class="content">
						这个很有创意~
					</view>
				</view>
				<view class="icon-box">
					<view class="iconfont icon-love icon-img">
						
					</view>
					<view class="love-number">
						12
					</view>
				</view>
			</view>
			<view class="item">
				<view class="img-box">
					<image class="img" src="http://localhost:8099/static/宇航员1.jpg" mode=""></image>
				</view>
				<view class="comment-content">
					<view class="name">
						张三
					</view>
					<view class="content">
						这个很有创意~
					</view>
				</view>
				<view class="icon-box">
					<view class="iconfont icon-love icon-img">
						
					</view>
					<view class="love-number">
						12
					</view>
				</view>
			</view>
			<view class="item">
				<view class="img-box">
					<image class="img" src="http://localhost:8099/static/宇航员1.jpg" mode=""></image>
				</view>
				<view class="comment-content">
					<view class="name">
						张三
					</view>
					<view class="content">
						这个很有创意~
					</view>
				</view>
				<view class="icon-box">
					<view class="iconfont icon-love icon-img">
						
					</view>
					<view class="love-number">
						12
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="comment-footer">
			<input class="input" type="text" value="" placeholder="留下你精彩的评论吧..." />
		</view>
	</view>
</template>

<script>
	export default {
		name:"comment",
		data() {
			return {
				closeBar:false,
			};
			
		},
		methods:{
			closeIt(){
				console.log('asfasfas')
				this.$emit('closeIt');
			}
		}
	}
</script>

<style>
.comment{
	background-color: #fff;
	height:500px;
	border-radius: 15px 15px 0 0;
	width:100%;
	position:relative;
}
.comment-header{
	position:absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 25px;
	line-height: 25px;
	margin-bottom: 10px;
}
.header-number{
	width: 100%;
	text-align: center;
	font-size: 15px;
	color: #000000;
}
.icon-close{
	position: absolute;
	top:0;
	right: 15px;
	font-size: 25px;
	height: 25px;
	width: 25px;
	z-index: 24;
}
.comment-list{
	height: 425px;
	width: 100%;
}
.item{
	margin-top: 20px;
	height: 60px;
	width: 100%;
}
.img-box{
	float: left;
	padding:5px 15px;	
}
.img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.comment-content{
	float: left;
	width: 70%;
	height: 50px;
	margin-top:10px;
}
.name{
	width: 100%;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
}
.content{
	width: 100%;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
}
.icon-box{
	float:right;
	width: 10%;
	height: 50px;
	margin-top:10px;
}
.icon-love{
	width: 100%;
	height: 25px;
	line-height: 25px;
	font-size: 15px;
}
.love-number{
	width: 100%;
	height: 25px;
	line-height: 25px;
	font-size: 15px;
}
.comment-footer{
	height: 50px;
	width: 100%;
	/* line-height: 50px; */
	color: #666;
	font-size: 18px;
	padding-left: 10px;
}
.input{
	border-bottom: 1px solid #ccc;
}

</style>
